<template>
  
  <div style="width: 100%">

   <div style="display: flex;flex-direction: row; width: 100%; " >
        
        <div style="margin-top: 10px; padding-left: 10px; box-sizing:border-box; color: #910782; width: 25%; height: 50px;">
           
            <flexbox>
              <div class="iconfont icon-kefu" style="font-size: 30px;"></div> 
              <div style="margin-left: 5px;">客服</div>
            </flexbox>

        </div>

        <div style="margin-top: 15px;  width: 50%;  align-items: center;">
            <flexbox orient="vertical">
               <div style="">
                 <img :src="user_info.avatar_url" style="width: 50px; height: 50px; border-radius: 25px;">
               </div>
               <div style="font-size: 19px;">{{user_info.nickname}}</div>
               <div style="font-size: 17px; color: #70408f">{{user_info.level_name}}</div>
               <div style="font-size: 14px; color: #858585">有效期至：{{user_info.expiry_time}}</div>
               <div style="font-size: 14px; color: #858585">邀请人：{{user_info.parent}}</div>
            </flexbox>            
        </div>

        <div style="margin-top: 15px;  width: 25%; ">
           <flexbox orient="vertical">
              <flexbox-item><div style="background-color: red; width:84%; margin-left: 5%; color: white; text-align: center;">会员升级</div></flexbox-item>
              <flexbox-item><div @click="information()" style="background-color: gray; width: 84%; color: white; margin-left: 5%;text-align: center;">个人信息</div></flexbox-item> 
           </flexbox>   
        </div>

    </div>
    
    <div style="width: 100%; display: flex; justify-content:center; position: relative; ">
       <img src="../assets/images/tiaodai.png" style="width: 87.5%; height: 35px;display: block;"> 
       <div style="position: absolute;bottom: 2px; color: white">{{info.friend_set}}</div>
    </div>

    <div v-show="user_info.level_level>=6?true:false" style="width: 100%; height: 10px; background-color: #e4e4e5; border-top:1px #cfcfcf solid; margin-top: 13px;"></div>

     <div style="margin-top: 10px;" v-show="user_info.level_level>=6?true:false">
        
        <flexbox :gutter="1">

            <flexbox-item>
              
              <div style="border-right:1px #a2a2a2 solid ">
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div style="text-align: center; color: #7b7b7b; font-size: 15px; ">可提现奖励</div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 20px;color: #65037A">{{user_info.price}}</div></flexbox-item>
                  </flexbox>
              </div>
   
            </flexbox-item>

             <flexbox-item>
              
              <div style="border-right:1px #a2a2a2 solid ">
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div style="text-align: center; color: #7b7b7b; font-size: 15px; ">累计奖励</div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 20px;color: #65037A">{{user_info.total_price}}</div></flexbox-item>
                  </flexbox>
              </div>
   
            </flexbox-item>

             <flexbox-item>
              
          
            <flexbox orient="vertical" :gutter="1">
               <flexbox-item> <div style="text-align: center; color: #7b7b7b; font-size: 15px; ">今日奖励</div></flexbox-item>
               <flexbox-item> <div style="text-align: center;font-size: 20px;color: #65037A">{{info.day_money}}</div></flexbox-item>
            </flexbox>
        
            </flexbox-item>
          
         </flexbox>
    
         <div style="width: 100%; display: flex; justify-content:center; ">
           <div class="user_cashWithdraw"  @click="TiXian()">全部提现</div>
         </div>

         <confirm v-model="show" :value="show"
          title="提示"
          @on-cancel="onCancel"
          @on-confirm="onConfirm"> <p style="text-align:center;">平台代扣10%个人所得税，实际到账为提现金额的90%，请知悉！</p>
         </confirm>
         
    </div>

    <div  style="width: 100%; height: 10px; background-color: #e4e4e5; border-top:1px #cfcfcf solid; margin-top: 13px;"></div>

   

    <div style="margin-top: 10px;">
        
        <flexbox :gutter="1">

            <flexbox-item>
              
              <div style="border-right:1px #a2a2a2 solid ">
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div style="text-align: center; color: #7b7b7b; font-size: 15px; ">可用学分</div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 20px;color: #65037A">{{user_info.integral}}</div></flexbox-item>
                  </flexbox>
              </div>
   
            </flexbox-item>

             <flexbox-item>
              
              <div style="border-right:1px #a2a2a2 solid ">
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div style="text-align: center; color: #7b7b7b; font-size: 15px; ">累计学分</div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 20px;color: #65037A">{{user_info.total_integral}}</div></flexbox-item>
                  </flexbox>
              </div>
   
            </flexbox-item>

             <flexbox-item>
              
          
            <flexbox orient="vertical" :gutter="1">
               <flexbox-item> <div style="text-align: center; color: #7b7b7b; font-size: 15px; ">今日学分</div></flexbox-item>
               <flexbox-item> <div style="text-align: center;font-size: 20px;color: #65037A">{{info.day_integral}}</div></flexbox-item>
            </flexbox>
        
   
            </flexbox-item>
          
       </flexbox>

       <div style="width: 100%; display: flex; justify-content:center; ">
           <button class="user_cashWithdraw"  @click="toArticle">学分说明</button>
       </div>

    </div>

    <!-- 我的奖金 -->
    
    <div style="width: 100%; height: 10px; background-color: #e4e4e5; border-top:1px #cfcfcf solid; margin-top: 13px;"></div>

      
    <!-- 我的奖励 -->
    <div v-show="user_info.level_level>=6?true:false">
		    	<flexbox :gutter="0">
		        
		           <flexbox-item :span="1.1/5">
		              
		              <div style=" padding: 40px 0; border:1px #9D9E9E solid; border-width: 0 1px 1px 0; " >
		                  <flexbox orient="vertical" :gutter="1">
		                     <flexbox-item> <div class="iconfont icon-cash" style="font-size: 30px; text-align: center; color:black"></div></flexbox-item>
		                     <flexbox-item> <div style="text-align: center;font-size: 16px; width: 50%;  margin: 0 auto;  color:black">我的奖金</div></flexbox-item>
		                  </flexbox>
		              </div>
		              
		           </flexbox-item>
		
		           <flexbox-item :span="3.9/5">
		               
		               <flexbox orient="vertical" :gutter="0">
		
		                     <flexbox-item>
		                                         
		                          <div class="border_bottom">
		
		                             <flexbox :gutter="0">
		                              
		                              <flexbox-item><div class="byjl">本月奖励</div></flexbox-item> 
		                              <flexbox-item><div class="xf">{{info.month_money}}元</div></flexbox-item> 
		
		                            </flexbox>
		
		                          </div>
		                                 
		                     </flexbox-item>
		
		                      <flexbox-item>
		
		                        <router-link  to="rewardDetail" tag="div">
		
		                          <div class="border_bottom">
		
		                              <flexbox :gutter="0">
		                                  
		                                  <flexbox-item :span="7/10"><div class="byjl">奖励明细</div></flexbox-item>
		                                  <flexbox-item :span="2/10"><div class="byjl" style="text-align: right">{{info.count_money}}次</div></flexbox-item> 
		                                  <flexbox-item :span="1/10"><div class="xf iconfont icon-right"></div></flexbox-item> 
		
		                              </flexbox>
		
		                           </div>
		
		                         </router-link >
		
		                     </flexbox-item>
		
		
		                      <flexbox-item>
		
		                       <router-link  to="forward" tag="div">
		
		                         <div class="border_bottom">
		
		                            <flexbox :gutter="0">
		                                
		                                <flexbox-item><div class="byjl">提现记录</div></flexbox-item> 
		                                <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 
		
		                            </flexbox>
		
		                          </div>
		
		                        </router-link>
		
		                     </flexbox-item>
		
		                      <flexbox-item>
		
		                       <router-link  to="forwardMoneys" tag="div">
		
		                         <div class="border_bottom">
		
		                            <flexbox :gutter="0">
		                                
		                                <flexbox-item><div class="byjl">每月奖励金额</div></flexbox-item> 
		                                <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 
		
		                            </flexbox>
		
		                          </div>
		
		                        </router-link>
		
		                     </flexbox-item>
		
		                </flexbox>
		
		           </flexbox-item>
		
		    </flexbox>
    </div>
    

    <!--我的学分-->

    <flexbox :gutter="0">
        
        
           <flexbox-item :span="1.1/5">
              
              <div style=" padding: 40px 0; border:1px #9D9E9E solid; border-width: 0 1px 1px 0; " >
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div class="iconfont iconfont2 icon-coin" style="font-size: 30px; text-align: center; color:black"></div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 16px; width: 50%;  margin: 0 auto;  color:black">我的学分</div></flexbox-item>
                  </flexbox>
              </div>
              

           </flexbox-item>

           <flexbox-item :span="3.9/5">
               
               <flexbox orient="vertical" :gutter="0">

                     <flexbox-item>
                        
                        <div class="border_bottom">

                           <flexbox :gutter="0">
                            
                            <flexbox-item><div class="byjl">本月奖励</div></flexbox-item> 
                            <flexbox-item><div class="xf">{{info.month_integral}}学分</div></flexbox-item> 

                          </flexbox>

                        </div>
                       

                     </flexbox-item>

                      <flexbox-item>

                       <router-link  to="rewardDetails" tag="div">

                          <div class="border_bottom">

                              <flexbox :gutter="0">
                                  
                                  <flexbox-item :span="7/10"><div class="byjl">奖励明细</div></flexbox-item> 
                                  <flexbox-item :span="2/10"><div class="byjl" style="text-align: right">{{info.count_integral}}次</div></flexbox-item> 
                                  <flexbox-item :span="1/10"><div class="xf iconfont icon-right"></div></flexbox-item> 

                              </flexbox>

                           </div>
                        </router-link>

                     </flexbox-item>


                      <flexbox-item>

                        <router-link  to="idealMoneyUse" tag="div">
                 
                           <div class="border_bottom">

                              <flexbox :gutter="0">
                                  
                                  <flexbox-item><div class="byjl">使用记录</div></flexbox-item> 
                                  <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                              </flexbox>

                            </div>
                        </router-link>

                     </flexbox-item>

                     <flexbox-item>

                       <router-link  to="forwardMoney" tag="div">

                         <div class="border_bottom">

                            <flexbox :gutter="0">
                                
                                <flexbox-item><div class="byjl">每月奖励学分</div></flexbox-item> 
                                <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                            </flexbox>

                          </div>

                       </router-link>

                     </flexbox-item>

                </flexbox>

           </flexbox-item>

    </flexbox>
    
    <!--我的订单-->
    
     <flexbox :gutter="0">
        
        
           <flexbox-item :span="1.1/5">
              
              <div style=" padding: 18px 0; border:1px #9D9E9E solid; border-width: 0 1px 1px 0; " >
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div class="iconfont iconfont2 icon-course" style="font-size: 30px; text-align: center; color:black"></div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 16px; width: 50%;  margin: 0 auto;  color:black">我的订单</div></flexbox-item>
                  </flexbox>
              </div>
              

           </flexbox-item>

           <flexbox-item :span="3.9/5">
               
               <flexbox orient="vertical" :gutter="0">

                     <flexbox-item>

                       <router-link  to="zlorder" tag="div">
                          
                          <div class="border_bottom">

                             <flexbox :gutter="0">
                              
                              <flexbox-item><div class="byjl">专栏订单</div></flexbox-item> 
                              <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                            </flexbox>

                          </div>

                       </router-link>
                       
                     </flexbox-item>

                      <flexbox-item>

                         <router-link  to="orderCourse" tag="div">

                            <div class="border_bottom">

                                <flexbox :gutter="0">
                                    
                                    <flexbox-item><div class="byjl">课程订单</div></flexbox-item> 
                                    <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                                </flexbox>

                             </div>

                         </router-link>

                     </flexbox-item>


                      <flexbox-item>

                       <router-link  to="orderMine" tag="div">

                         <div class="border_bottom">

                            <flexbox :gutter="0">
                                
                                <flexbox-item><div class="byjl">会员订单</div></flexbox-item> 
                                <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                            </flexbox>

                          </div>
                        </router-link>

                     </flexbox-item>

                     

                </flexbox>

           </flexbox-item>

    </flexbox>
    
    <!--我的足迹-->
    
     <flexbox :gutter="0">
        
        
           <flexbox-item :span="1.1/5">
              
              <div style=" padding: 18px 0; border:1px #9D9E9E solid; border-width: 0 1px 1px 0; " >
                  <flexbox orient="vertical" :gutter="1">
                     <flexbox-item> <div class="iconfont iconfont2 icon-footprint" style="font-size: 30px; text-align: center; color:black"></div></flexbox-item>
                     <flexbox-item> <div style="text-align: center;font-size: 16px; width: 50%;  margin: 0 auto;  color:black">我的足迹</div></flexbox-item>
                  </flexbox>
              </div>
              

           </flexbox-item>

           <flexbox-item :span="3.9/5">
               
               <flexbox orient="vertical" :gutter="0">

                     <flexbox-item>

                       <router-link  to="studyHistory" tag="div">
                          
                          <div class="border_bottom">

                             <flexbox :gutter="0">
                              
                              <flexbox-item><div class="byjl">学习历史</div></flexbox-item> 
                              <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                            </flexbox>

                          </div>

                       </router-link>
                       
                     </flexbox-item>

                      <flexbox-item>

                         <router-link  to="collection" tag="div">

                            <div class="border_bottom">

                                <flexbox :gutter="0">
                                    
                                    <flexbox-item><div class="byjl">我的收藏</div></flexbox-item> 
                                    <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                                </flexbox>

                             </div>

                         </router-link>

                     </flexbox-item>


                      <flexbox-item>

                       <router-link  to="message" tag="div">

                         <div class="border_bottom">

                            <flexbox :gutter="0">
                                
                                <flexbox-item><div class="byjl">我的留言</div></flexbox-item> 
                                <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

                            </flexbox>

                          </div>
                        </router-link>

                     </flexbox-item>

                     

                </flexbox>

           </flexbox-item>

    </flexbox>


    <div class="border_bottom">

         <flexbox :gutter="0">

            <flexbox-item :span="1/10"><div class="cell iconfont icon-huiyuanqia-copy"></div></flexbox-item> 
            <flexbox-item> <router-link  to="card" tag="div"><div class="byjl">奖励会员卡</div> </router-link></flexbox-item> 
            <flexbox-item><div class="xf iconfont icon-right"></div></flexbox-item> 

        </flexbox>

    </div>
   
    <div class="border_bottom">

         <flexbox :gutter="0">

            <flexbox-item :span="1/10"><div class="cell iconfont icon-kehu"></div></flexbox-item> 
            <flexbox-item :span="5/10"><router-link  to="friend" tag="div"><div class="byjl">我的好友</div></router-link></flexbox-item>
            <flexbox-item :span="3/10"><router-link  to="friend" tag="div"><div class="byjl" style="text-align: right;">{{info.count_friend}}个好友</div></router-link></flexbox-item> 
            <flexbox-item :span="1/10"><div class="xf iconfont icon-right"></div></flexbox-item> 

        </flexbox>

    </div>

    <div class="border_bottom" style="margin-bottom: 50px;" @click="toErWeima">

         <flexbox :gutter="0">

            <flexbox-item :span="1/10"><div class="cell iconfont icon-erweima"></div></flexbox-item> 
            <flexbox-item :span="5/10"><div class="byjl">我的二维码</div></flexbox-item>
            <flexbox-item :span="3/10"><div class="byjl" style="text-align: right;">分享二维码</div></flexbox-item>  
            <flexbox-item :span="1/10"><div class="xf iconfont icon-right"></div></flexbox-item> 

        </flexbox>

    </div>

   <tab></tab>

  </div> 

</template>

<script>

import  { Confirm ,base64} from 'vux'


export default {
  components: {
    Confirm,base64
  },
  name: 'hello',
  data () {
    return {
      
      user_info:'',
      info:'',
      show:false,
      msg: 'Welcome to Your Vue.js App',
      access_token:''

    }
  },
  methods:{

    login:function(){

       this.$store.state.isLogin = 1;

       console.log(this.$store.state.isLogin);

        // this.$router.push({ path: '/HelloFromVux'});
         
    },

    onCancel:function(){
       console.log('取消');
    },
    onConfirm:function(){
       console.log('确定');
    },
    
    
    

    information:function(){
       
       this.$router.push({ path: '/information'});
    },

    
	  //获取详情
    getDetail(){
    	  
		    this.$store.commit('updateLoadingStatus',true);
		  
	    	this.$http.get(this.$store.state.api + 'userdd/index&access_token=' + this.access_token)
		    .then((response) => {
		    		
		    console.log(response)
				
				if(response.body.code == 0) {
					
					this.info = response.body.data
					this.user_info = response.body.data.user_info
					
				} else {
					
				}
					
				
				this.$store.commit('updateLoadingStatus',false);		
				
			  }, (response) => {
	             
	             
			  });
    },
    
    
    //提现
    TiXian(){
         
        console.log(88);
        this.show = true;
        
        this.$store.commit('updateLoadingStatus',true);
		  
	    	this.$http.get(this.$store.state.api + 'userlogin/apply',
	    	{
		    		access_token:this.access_token
		    })
		    .then((response) => {
		    		
		    console.log(response)
				
				if(response.body.code == 0) {
					
//					this.info = response.body.data
					
				} else {
					
				}
					
				
				this.$store.commit('updateLoadingStatus',false);		
				
			  }, (response) => {
	             
	             
			  });
    },
    
    //学分说明
    toArticle(){
    	
    	this.$router.push({ path: '/article'});
    	
    },
    
    //跳转到二维码
    toErWeima(){
    	
    	this.$router.push({ path: '/erweima'});
    	
    },
    
    
    //获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },	
      
      
      
  },
  mounted() {
  	
  	var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
    	   this.access_token = localStorage.getItem('access_token');

    this.getDetail();

  }
}
</script>


<style scoped lang="less">

.user_cashWithdraw{
  margin:10px 20px 0px 20px;
  border-radius: 0;
  padding: 5px 20px;
  font-size: 16px;
  border: none;
  background-color: #65037A;
  color: #fff;
  line-height: 30px;
}

.byjl{
  color: #7b7b7b; font-size: 16px;padding-left: 10px;
}
.xf{
   margin-right: 10px; text-align: right; color: #7b7b7b; font-size: 15px;height: 44px;line-height: 44px;
}
.border_bottom{
   border-bottom:1px #9D9E9E solid;box-sizing: border-box;
}
.cell{
   color: #7b7b7b; font-size: 15px;height: 44px;line-height: 44px;font-size: 25px; margin-left: 10px;
}


</style>
